<template>
    <div >
        <div class="pink">
            <nav-bar ><div slot="center">我的档案</div></nav-bar>
        </div>
         <div class="wrapper" ref="wrapper">
       <div class="content">
       <div class="register">
           <img class="tuy" src="~assets/img/profile/avatar.svg" alt="">
           <div class="dlzc">
               <span>登录/</span>
               <span>注册</span>
               <div class="bangding"><img src="~assets/img/profile/phone.svg" alt=""><span>暂无绑定手机</span></div>
           </div>
           <div class="qianwai">></div>
       </div>
       <div class="balance">
        <div class="balance1">
            <strong>0.00</strong><span>元</span>
            <p>我的余额</p>
        </div>
        <div class="balance1 bordea"><strong>0</strong><span>个</span>
            <p>我的优惠</p></div>
        <div class="balance1"><strong>0</strong><span>分</span>
            <p>我的积分</p></div>
       </div>
        <div class="state">
            <ul>
                <li class="lii"><img src="~assets/img/profile/message.svg" alt=""><span>我的消息</span></li>
                  <li class="lii juli"><img src="~assets/img/profile/pointer.svg" alt=""><span>积分商城</span></li>
                    <li class="lii"><img src="~assets/img/profile/vip.svg" alt=""><span>会员卡</span></li>
                
            </ul>
        </div>
         <div class="state">
            <ul>
                <li class="lii"><img src="~assets/img/profile/cart.svg" alt=""><span>我的购物车</span></li>
                  <li class="lii juli"><img src="~assets/img/profile/shopping.svg" alt=""><span>下载购物APP</span></li>
                   
                
            </ul>
        </div>
         </div>
       </div>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import BScroll from 'better-scroll'
export default {
    name:'Profile',
    components:{
        NavBar
       
    },
    mounted(){
         //创建bscroll对象
                this.backtop=new BScroll(this.$refs.wrapper,{
                //在scroll里需要点击click：true
                click:true,
                //开启监听滚动事件
                probeType:3,
                //上拉加载更多
                pullUpLoad:true
                  
                   } ) 
    },
    activated(){
        this.backtop.refresh()
    }
}
</script>

<style scoped>
.wrapper{
  
   height: 100vh;
   overflow: hidden;
    
}
.content{

 padding-bottom: 93px;
}
.pink{
    background-color: var(--color-tint);
    font-size: 16px;
    color: #fff;
    height: 40px;
}
.register{
    display: flex;
    background-color: var(--color-tint);
    color: #fff;
    height: 100px;
}
.register .tuy{
    width: 60px;
    height: 60px;
    margin-left: 20px;
    margin-top: 20px;
}
.register .dlzc{
    flex: 1;
    margin-top: 25px;
    margin-left: 10px;
}
.qianwai{
    width: 50px;
    line-height: 100px;
    font-size: 30px;
}
.bangding{
    margin-top: 3px;
    margin-left: -5px;
    font-size: 14px;
}
.bangding img{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    color: #666;
    
}
.balance{
    display: flex;
    height: 100px;
    border-bottom: 15px solid rgb(248, 247, 247);
}
.balance .balance1{
    flex: 1;
    text-align: center;
    padding-top: 20px;
}
.bordea{
    border-left: 1px solid rgb(214, 212, 212);
    border-right: 1px solid rgb(214, 212, 212);
}
.balance1 strong{
    font-size: 25px;
    color: rgb(241, 68, 68);
}
.state img{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
}
.state{
 border-bottom: 15px solid rgb(248, 247, 247);
}

.state .lii{
    padding: 10px 20px;
   
}
.juli{
    border-top: 1px solid rgb(214, 212, 212);
    border-bottom: 1px solid rgb(214, 212, 212);
}
</style>